<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Xenon Boostrap Admin Panel"/>
    <meta name="author" content=""/>

    <title>校园e商</title>
    <link rel="stylesheet" href="/public/css/fonts/linecons/css/linecons.css">
    <link rel="stylesheet" href="/public/css/fonts/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/public/css/bootstrap.css">
    <link rel="stylesheet" href="/public/css/xenon-core.css">
    <link rel="stylesheet" href="/public/css/xenon-forms.css">
    <link rel="stylesheet" href="/public/css/xenon-components.css">
    <link rel="stylesheet" href="/public/css/xenon-skins.css">
    <link rel="stylesheet" href="/public/css/custom.css">
    <link rel="stylesheet" href="/public/js/bootstrap-select/css/bootstrap-select.min.css">


    <script src="/public/js/jquery-1.11.1.min.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
    <script src="/public/js/TweenMax.min.js"></script>
    <script src="/public/js/resizeable.js"></script>
    <script src="/public/js/joinable.js"></script>
    <script src="/public/js/xenon-api.js"></script>
    <script src="/public/js/xenon-toggles.js"></script>
    <script src="/public/js/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="/public/js/xenon-widgets.js"></script>
    <script src="/public/js/devexpress-web-14.1/js/globalize.min.js"></script>
    <script src="/public/js/devexpress-web-14.1/js/dx.chartjs.js"></script>

    <script src="/public/js/daterangepicker/daterangepicker.js"></script>
    <script src="/public/js/datepicker/bootstrap-datepicker.js"></script>


    <!-- JavaScripts initializations and stuff -->
    <script src="/public/js/xenon-custom.js"></script>


    <!-- treeTable -->
    <link rel="stylesheet" href="/public/treeTable/default/jquery.treeTable.css">
    <link rel="stylesheet" href="/public/treeTable/vsStyle/jquery.treeTable.css">
    <script src="/public/treeTable/jquery.treeTable.js"></script>
    <script src="/public/js/ulmsale/common.js"></script>
    <script src="/public/lib/layer/js/layer.js"></script>

    <script>

        $(function () {

            getAsyncJSON("/power/admin/AdminDeptCtrl/loadTreeData", {id: 0}, function (data) {
                initTree(data);

            });

            $("#deptTree tr").ondblclick = function (data) {
                alert(data);
            }

        });

        function initTree(treeList) {
            $('#deptTree').html('');
            var trHtml = ' <thead> <tr> <td>部门名称</td></tr> </thead>';
            for (var i = 0; i < treeList.length; i++) {
                var trData = treeList[i];
                var hasChild = (trData.isLeaf == true || trData.isLeaf == 1 ) ? '' : true;
                if (trData.parentId == 0) {
                    trHtml += '<tr id="' + trData.id + '"  hasChild="' + hasChild + '" deptName = "'+trData.name+'" ondblclick="checkDept(' + trData.id + ',\''+trData.name+'\')"> ';
                    trHtml += '<td id="name_' + trData.id + '"><span controller="true">' + trData.name + '</span></td>';
                    trHtml += '</tr>';
                } else {
                    trHtml += '<tr id="' + trData.id + '" hasChild="' + hasChild + '" name="pid_' + trData.parentId + '"  pid="' + trData.parentId + '" ondblclick="checkDept(' + trData.id + ',\'' + trData.name + '\')"> ';
                    trHtml += '<td id="name_' + trData.id + '">' + trData.name + '</td>';
                    trHtml += '</tr>';

                }

            }
            $('#deptTree').append(trHtml);

            //初始化表格样式
            var option = {
                theme: 'vsStyle',
                expandLevel: 2,
                onSelect: function ($treeTable, id) {
                    window.console && console.log('onSelect:' + id);
                },
                beforeExpand: function ($treeTable, id) {
                    $.getJSON('/power/admin/AdminDeptCtrl/loadTreeData', {id: id}, function (data) {
                        var trHtml = '';
                        if (data != null && data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                var trData = data[i];
                                var hasChild = (trData.isLeaf == true || trData.isLeaf == 1 ) ? '' : true;
                                trHtml += '<tr id="' + trData.id + '" hasChild="' + hasChild + '" name="pid_' + trData.parentId + '"  pid="' + trData.parentId + '" ondblclick="checkDept(' + trData.id + ',\'' + trData.name + '\')"> ';
                                trHtml += '<td id="name_' + trData.id + '">' + trData.name + '</td>';
                                trHtml += '</tr>';
                            }
                            $treeTable.addChilds(trHtml, 1);
                        }

                    })
                }

            }
            $('#deptTree').treeTable(option);
        }


        function checkDept(id, name) {
            window.parent.callBack(id, name);
        }

    </script>
</head>
<body class="page-body" style="background: #ffffff;">


<div class="panel panel-default">
*{<div class="panel-heading">}*
    <div class="panel-body">
        <table id="deptTree" class="table table-bordered table-striped" style="text-align:left; width: 100%">

        </table>
    </div>
*{</div>}*
</div>
</body>

</html>


